<template>
  <div class="ele-body">
    <div class="bg-fff padding-15">
      <div>
        <!-- 搜索表单 -->
        <user-search
          v-if="searchData.length > 0"
          :searchData="searchData"
          @search="reload"
        />
      </div>
      <div class="margin-y-15">
        <a-button @click="daochu()">导出</a-button>
      </div>
      <div class="flex align-center bg1">
        <div class="t t1 flex1">货品信息</div>
        <div class="t t2">数量</div>
        <div class="t t3">金额</div>
        <div class="t t4">付款情况</div>
        <div class="t t5">时间</div>
        <div class="t t6">备注</div>
        <div class="t t7">操作</div>
      </div>
      <div>
        <div v-for="(item, index) in list" :key="index">
          <div class="flex align-center bg2">
            <div class="margin-right-30"
              >销售单号：{{ item.order_sn || '' }}</div
            >
            <div class="margin-right-30"
              >会员：{{ item.nickname || '' }} {{ item.mobile }}</div
            >
            <div class="margin-right-30"
              >收银：{{ item.make_user_name || '' }}
            </div>
            <div class="margin-right-30"
              >主销导购：{{ item.main_salesman_name || '' }}
            </div>
            <div class="margin-right-30"
              >销售单位：{{ item.store_name || '' }}
            </div>
          </div>
          <div>
            <table width="100%" class="bg3">
              <tr v-for="(m, mindex) in item.item" :key="mindex">
                <td class="t1">
                  <div class="flex align-center">
                    <a-image
                      :width="50"
                      :height="50"
                      :src="m.thumb_url ? m.thumb_url : ''"
                    />
                    <div class="flex1 margin-left-10">
                      <div class="flex align-center">
                        <span>{{ m.bar_code || '' }}</span>
                        <span class="tips">{{ m.type_name || '' }}</span>
                        <span class="tips" v-if="m.status && m.status == 4"
                          >已退还</span
                        >
                      </div>
                      <div class="margin-top-15">{{ m.name || '' }}</div>
                    </div>
                  </div>
                </td>
                <td class="t2">{{ m.num || '' }}</td>
                <td class="t3">
                  <template v-if="m.type == 1"
                    >收款金额：{{ m.pay_amount || 0 }}</template
                  >
                  <template v-if="m.type == 3"
                    >抵扣金额：{{ m.discount_amount || 0 }}</template
                  >
                  <template v-if="m.type == 4"
                    >抵扣金额：{{ m.discount_amount || 0 }}</template
                  >
                  <template v-if="m.type == 5"
                    >回收金额：{{ m.discount_amount || 0 }}</template
                  >
                </td>
                <td :rowspan="item.item.length" class="t4" v-if="mindex == 0">{{
                  item.pay_type_name || ''
                }}</td>
                <td class="t5" :rowspan="item.item.length" v-if="mindex == 0">
                  <div>销售时间：{{ m.sales_time || '' }}</div>
                  <div>创建时间：{{ m.create_time || '' }}</div>
                </td>
                <td class="t6">{{ m.note || '' }}</td>
                <td class="t7" :rowspan="item.item.length" v-if="mindex == 0">
                  <a-space>
                    <a @click="toDetail(item, m)">查看</a>
                    <a @click="toEdit(item, m)">编辑</a>
                  </a-space>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="margin-top-15">
      <vxe-pager
        size="mini"
        :current-page="form.page"
        :page-size="form.page_size"
        :total="total"
        :layouts="['Total', 'PrevPage', 'JumpNumber', 'NextJump', 'FullJump']"
        @page-change="handlePageChange"
      />
    </div>

    <!-- 编辑弹窗 -->
    <add
      v-if="showAdd"
      v-model:visible="showAdd"
      :money="money"
      :order_sn="order_sn"
      @done="getList"
    />
  </div>
</template>
<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { actionFn } from '@/utils/action.js';
  import { daochuFn } from '@/utils/daochu.js';
  import { PlusOutlined, UploadOutlined } from '@ant-design/icons-vue';
  import { useRouter } from 'vue-router';
  import UserSearch from '@/components/zbTable/components/user-search.vue';
  import add from './components/add.vue';
  import zbTable from '@/components/zbTable/purchasePurchaseIndex.vue';
  import { get_pay_type_select } from '@/api/setting/pay_type';
  import { get_sales_manage_list } from '@/api/order/sales_manage';
  // 是否显示编辑弹窗
  const tableRef = ref(null);
  const router = useRouter();
  const { push } = useRouter();
  const form = reactive({
    page: 1,
    page_size: 10,
    filters: {}
  });
  const form2 = reactive({
    order_sn: '',
    bar_code: '',
    name: '',
    member_id: '',
    sales_start_time: '',
    sales_end_time: '',
    refund_info: '',
    junk_info: '',
    gift_info: '',
    create_start_time: '',
    create_end_time: '',
    store_code: '',
    mobile: '',
    pay_type: '',
    sales_tag_code: '',
    consume_motive_code: ''
  });
  const list = ref([]);
  const showAdd = ref(false);
  const money = ref(0);
  const order_sn = ref(null);
  const total = ref(0);
  // 表格搜索动态表单
  let searchData = ref([
    {
      label: '单据编号',
      name: 'order_sn',
      options: [],
      type: 'text'
    },
    {
      label: '条码',
      name: 'bar_code',
      options: [],
      type: 'text'
    },
    {
      label: '货品名称',
      name: 'name',
      options: [],
      type: 'text'
    },
    /* {
      label: '会员Id',
      name: 'member_id',
      options: [],
      type: 'text'
    }, */
    {
      label: '会员手机',
      name: 'mobile',
      options: [],
      type: 'text'
    },
    {
      label: '支付方式',
      name: 'pay_type',
      options: [
        /* { key: '', label: '全部' },
        { key: 'cash', label: '现金' },
        { key: 'wechat', label: '微信' },
        { key: 'alipay', label: '支付宝' },
        { key: 'card', label: '刷卡' },
        { key: 'transfer', label: '银行转账' } */
      ],
      type: 'select'
    },
    {
      label: '退货情况',
      name: 'refund_info',
      options: [
        { key: '', label: '全部' },
        { key: '1', label: '未退货' },
        { key: '2', label: '已退货' }
      ],
      type: 'select'
    },
    {
      label: '旧货回收情况',
      name: 'junk_info',
      options: [
        { key: '', label: '全部' },
        { key: '1', label: '包含旧货' },
        { key: '2', label: '不包含旧货' }
      ],
      type: 'select'
    },
    {
      label: '销售时间',
      name: 'time1',
      options: [],
      type: 'timerange'
    },
    {
      label: '创建时间',
      name: 'time2',
      options: [],
      type: 'timerange'
    },
    {
      label: '销售单位',
      name: 'store_code',
      options: [],
      type: 'select'
    },
    {
      label: '是否包括赠品',
      name: 'store_code',
      options: [
        { key: '', label: '全部' },
        { key: '1', label: '普通赠品' },
        { key: '2', label: '非赠品' },
        { key: '3', label: '营销赠品' }
      ],
      type: 'select'
    },
    {
      label: '销售标记',
      name: 'sales_tag_code',
      options: [
        { key: '', label: '全部' },
        { key: '1', label: '普通赠品' },
        { key: '2', label: '非赠品' },
        { key: '3', label: '营销赠品' }
      ],
      type: 'select'
    },
    {
      label: '消费动机',
      name: 'consume_motive_code',
      options: [
        { key: '', label: '全部' },
        { key: '1', label: '普通赠品' },
        { key: '2', label: '非赠品' },
        { key: '3', label: '营销赠品' }
      ],
      type: 'select'
    }
  ]);
  const exportData = reactive({
    url: '/order/sales_manage/export',
    params: form.filters
  });

  onMounted(() => {
    get_pay_type_select().then((res) => {
      res.forEach((item) => {
        item.key = item.value;
      });
      searchData.value[5].options = res;
    });
    getList();
  });

  const handlePageChange = ({ currentPage, pageSize }) => {
    form.page = currentPage;
    getList();
  };

  const getList = () => {
    get_sales_manage_list(form).then((res) => {
      total.value = res.total;
      list.value = res.data;
    });
  };
  const reload = (val) => {
    let obj = { ...form2, ...val };
    form.filters = obj;
    get_sales_manage_list(form).then((res) => {
      list.value = res.data;
    });
  };

  const daochu = () => {
    exportData.params = form.filters;
    daochuFn(exportData);
  };
  const toDetail = (item, m) => {
    push({
      path: '/order/sales_manage/detail',
      query: {
        order_sn: m.order_sn
      }
    });
  };
  const toEdit = (item, m) => {
    money.value = item.pay_amount;
    order_sn.value = m.order_sn;
    showAdd.value = true;
  };
</script>

<style lang="less" scoped>
  .bg1 {
    background-color: #e5e5e5;
    padding: 8px;
  }

  .bg2 {
    background-color: #f5f5f5;
    padding: 8px;
  }

  .t2,
  .t3,
  .t4,
  .t6,
  .t7 {
    text-align: center;
    width: 115px;
  }
  .t5 {
    text-align: center;
    width: 200px;
  }

  .bg3 .t1,
  .bg3 .t2,
  .bg3 .t3,
  .bg3 .t4,
  .bg3 .t5,
  .bg3 .t6,
  .bg3 .t7 {
    border-right: 2px solid #f5f5f5;
    padding: 20px 0;
  }
  .tips {
    font-size: 10px;
    background-color: #e5e5e5;
    padding: 0px 10px;
    margin-left: 10px;
  }
</style>
